<template>
<view>
  <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
    <swiper-item v-for="(item,index) in list.banner" :key="index">
      <image :src="item.image_url" mode=""></image>
    </swiper-item>
  </swiper>
  <view class="nav">
    <ul class="ul">
      <li v-for="(item,index) in list.channel" :key="item.id" class="li">
        <image :src="item.icon_url" mode="" class="img1" @click="sum(item.id)"></image>
        <p>{{item.name}}</p>
      </li>
    </ul>
  </view>
  <div class="line"></div>
  <div class="product">
    <div class="title">品牌制造商直供</div>
    <ul class="ul2">
      <li v-for="(item,index) in list.brandList" :key="item.id" class="li2">
        <image :src="item.new_pic_url" mode=""></image>
        <div class="info">
          <p>{{item.name}}</p>
          <p>${{item.floor_price}}</p>
        </div>
      </li>
    </ul>
  </div>
</view>
</template>

<script>
  import http from "../../http/http.js"
  export default {
    data(){
      return {
        list:[]
      }
    },
    methods:{
      async add(){
        let res=await http.get('http://shop.bufantec.com/bufan/index/index')
        console.log(res)
        this.list=res.data
      },
      sum(id){
        wx.navigateTo({
          url:'../flxq/flxq?id='+id
        })
      }
    },
    mounted() {
      this.add()
    }
  }
</script>

<style scoped>
.ul{
  width: 100%;
  height: 200rpx;
  display: flex;
}
.li{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.img1{
  width: 60%;
  height: 45px;
}
.line{
  width: 100%;
  height: 30rpx;
  background-color: #eee;
}
.product{
  width: 100%;
}
.title{
  width: 100%;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
  font-size: 40rpx;
}
.ul2{
  width: 100%;
  padding: 0 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
</style>